<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>精确计算</title>
		<link rel="stylesheet" href="../css/mui.min.css">
		<style type="text/css">
			.mui-content {
				padding: 10px 10px;
			}
			
			#heros li {
				padding-left: 5px;
				padding-bottom: 5px;
				border: 1px solid #ccc;
				margin-bottom: 5px;
				position: relative;
			}
			.btn-delete{
				position: absolute;
				right: 0;
				top: 0;
				font-size: 30px;
				line-height: 30px;
				width: 30px;
				height: 30px;
				padding: 0;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-row">
				<div class="mui-col-xs-6">
					LV <em class="lv">1</em> 的英雄
				</div>
			</div>
			<ol id="heros">
				<li>
					<h5 >
						经验值：
						<span class='range-input-value'>50</span>
					</h5>
					<button type="button" class="mui-btn mui-btn-danger btn-delete">×</button>
					<div class="mui-input-row mui-input-range">
						<input type="range" class="range-input" value="50" min="0" max="100">

					</div>
				</li>
				<li>
					<h5>
						经验值：
						<span class='range-input-value'>50</span>
						<i class="delBtn">×</i>
					</h5>
					<div class="mui-input-row mui-input-range">
						<input type="range" class="range-input" value="50" min="0" max="100">

					</div>
				</li>
			</ol>
			<p class="info">
				当前<em class="lv">x</em>级英雄x个，累计2.0等级200。总累计2.0等级400
			</p>
			<p class="mui-row mui-text-center">
				<button type="button" class="mui-btn" id="addOne">加一个</button>
			</p>
			<p class="mui-row mui-text-right">
				<button type="button" class="mui-btn mui-btn-primary" id="nextStepBtn">下一步,添加<em id="nextLv"></em>级英雄</button>
				<button type="button" class="mui-btn mui-btn-primary" id="finishBtn">完成</button>
			</p>
		</div>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var lv = 1;
			var addOneBtn = document.getElementById('addOne');
			var nextStepBtn = document.getElementById('nextStepBtn');
			var finishBtn = document.getElementById('finishBtn');
			if(lv >= 20) {
				nextStepBtn.style.display = 'none';
			}

			var lvSpans = document.getElementsByClassName('lv');
			for(var i = 0; i < lvSpans.length; i++) {
				lvSpans[i].innerHTML = lv;
			}
			document.getElementById('nextLv').innerHTML = lv + 1;

			var ol = document.getElementById('heros');
			addOneBtn.onclick = function() {

			}
			nextStepBtn.onclick = function() {

			}
			finishBtn.onclick = function() {

			}
			var Heros = (function(){
				var herosCol = {};
				
				
				
			})();
			
			
		</script>
	</body>

</html>